@primary-color: #027aff;
@success-color: #19be6b;
@warning-color: #ff9900;
@error-color: #ed4014;
@white-color: #ffffff;
@gray-color: #efefef;

@text-color: #000000;
@text-sub-color: #00000073;
@border-color: #d9d9d9;
@disabled-color: #c5c8ce;
@background-color: #f3f3f3;
@background-sub-color: #eeeeee;
@shadown-color: #cccccc;

// 头部iconsize
@headerIconFontSize: 22px;

// 头部高度、底部功能按钮和icon的宽高大小是一致的
@iconSize: 40px;

.icon {
  width: @iconSize;
  height: @iconSize;
  min-width: @iconSize;
  min-height: @iconSize;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 0;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  a {
    color: initial;
    width: 100%;
    height: 100%;
    outline: none;
    position: relative;
    z-index: 1;
  }

  .iconfont {
    width: 22px;
    position: relative;
  }

  &:hover {
    &::before {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}

.link-style {
  color: @primary-color;
  cursor: pointer;
}

.link-margin {
  margin-left: 8px;
}

.gray-text {
  color: @disabled-color;
  font-size: 12px;
  margin-top: 4px;
}

.block-button {
  color: @text-color;
  vertical-align: middle;
  box-shadow: 0 0 4px #ccc;
  display: inline-block;
  padding: 6px 14px;
  border: none;
  transition: all 0.4s;
  border-radius: 4px;
  background-color: rgba(245, 245, 245, 0.6);

  .iconfont {
    font-size: 14px !important;
  }

  &:active {
    box-shadow: 0 0 4px #ccc inset;
  }
}
.block-button.disabled-button {
  background-color: #dbdbdb;
  box-shadow: none;
  color: #b5b5b5;
}